<script setup lang="ts">
import { ref } from 'vue'
</script>

<template>
  <main class="main-wrap flex-v-cc" v-hl>
    <div class="loading-wrap flex-h-cc">
      <div class="container">
        <div class="loader1"></div>
      </div>
      <div class="container">
        <div class="loader2"></div>
      </div>
      <div class="container">
        <div class="loader3"></div>
      </div>
      <div class="container">
        <div class="loader4"></div>
      </div>
      <div class="container">
        <div class="loader5"></div>
      </div>
    </div>
    <div class="loading-wrap flex-h-cc">
      <div class="container">
        <div class="loader6"></div>
      </div>
      <div class="container">
        <div class="loader7"></div>
      </div>
      <div class="container">
        <div class="loader8"></div>
      </div>
      <div class="container">
        <div class="loader9"></div>
      </div>
      <div class="container">
        <div class="loader10"></div>
      </div>
    </div>
    <div class="loading-wrap flex-h-cc">
      <div class="container">
        <div class="loader11">
          <div class="half_circle"></div>
          <div class="half_circle"></div>
        </div>
      </div>
      <div class="container">
        <div class="loader12"></div>
      </div>
      <div class="container">
        <div class="loader13"></div>
      </div>
    </div>
  </main>
</template>

<style scoped lang="scss">
.main-wrap {
  --background-color: #2c3e50;
  --size: 72px;
  --border-size: 10px;
  @include size(100%, 100%);
  padding: 24px;
  overflow-y: auto;
  background: #f1f9f9;
  .loading-wrap {
    @include size(100%, auto);
    transform: translateY(-50px);
    .container {
      @include size(120px, 120px);
      background-color: rgba(230, 244, 255, 0.8);
      margin: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      .loader1 {
        @include size(63px, 63px);
        border-radius: 50%;
        border: 4px solid var(--circle_color);
        border-bottom-color: var(--rotate_color);
        animation: rotate 1s linear infinite;
      }
      .loader2 {
        @include size(63px, 63px);
        position: relative;
        border-radius: 50%;
        border: 4px solid var(--circle_color);
        animation: rotate 1s linear infinite;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .loader2::before {
        @include size(74px, 74px);
        position: absolute;
        content: '';
        border: 2px solid transparent;
        border-bottom-color: var(--rotate_color);
        border-radius: 50%;
      }
      .loader3 {
        @include size(63px, 63px);
        position: relative;
        border-radius: 50%;
        border: 4px solid var(--circle_color);
        animation: rotate 1s linear infinite;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .loader3::before {
        @include size(74px, 74px);
        position: absolute;
        content: '';
        border: 2px solid transparent;
        border-bottom-color: var(--rotate_color);
        border-top-color: var(--rotate_color);
        border-radius: 50%;
      }
      .loader4 {
        @include size(63px, 63px);
        position: relative;
        border-radius: 50%;
        border: 4px solid var(--circle_color);
        animation: rotate 1s linear infinite;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .loader4::before {
        @include size(52px, 52px);
        position: absolute;
        content: '';
        border: 2px solid transparent;
        border-bottom-color: var(--rotate_color);
        border-radius: 50%;
      }
      .loader5 {
        @include size(63px, 63px);
        position: relative;
        border-radius: 50%;
        border: 4px solid var(--circle_color);
        animation: rotate 1s linear infinite;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .loader5::before {
        @include size(50px, 50px);
        position: absolute;
        content: '';
        border: 2px solid transparent;
        border-bottom-color: var(--rotate_color);
        border-top-color: var(--rotate_color);
        border-radius: 50%;
      }
      .loader6 {
        @include size(24px, 24px);
        border-radius: 50%;
        position: relative;
        background-color: var(--rotate_color);
        box-shadow:
          -32px 0 #fff,
          32px 0 #fff;
        animation: rotate6 1.5s ease-in-out infinite;
      }
      .loader7 {
        @include size(78px, 78px);
        position: relative;
        animation: rotate7 1s linear infinite;
        &::before,
        &::after {
          @include size(24px, 24px);
          content: '';
          position: absolute;
          top: 50%;
          transform: translate(0, -50%);
          border-radius: 50%;
        }
        &::before {
          right: 0;
          background-color: #6fa110;
        }
        &::after {
          left: 0;
          background-color: var(--rotate_color);
        }
      }
      .loader8 {
        @include size(78px, 78px);
        position: relative;
        animation: rotate8 1s linear infinite alternate;
        &::before,
        &::after {
          content: '';
          @include size(28px, 28px);
          position: absolute;
          background-color: seashell;
          top: 50%;
          transform: translate(0, -50%);
          border-radius: 50%;
        }
        &::after {
          right: 0;
          background-color: #6fa110;
        }
        &::before {
          left: 0;
          background-color: var(--rotate_color);
        }
      }
      .loader9 {
        @include size(72px, 72px);
        position: relative;
        animation: rotate9 1s linear infinite;
        &::before,
        &::after {
          content: '';
          @include size(24px, 24px);
          position: absolute;
          border-radius: 50%;
          background-color: brown;
        }
        &::before {
          top: 0;
          background-color: #6fa110;
          animation: scale9 1s infinite ease-in-out alternate;
        }
        &::after {
          bottom: 0;
          background-color: var(--rotate_color);
          animation: scale9 1s 0.5s infinite ease-in-out alternate;
        }
      }
      .loader10 {
        @include size(78px, 78px);
        position: relative;
        animation: rotate10 1s linear infinite;
        &::after,
        &::before {
          content: '';
          @include size(28px, 28px);
          position: absolute;
          background-color: chartreuse;
          top: 50%;
          left: 50%;
          border-radius: 50%;
          animation: loader10 1s ease-in-out infinite;
        }
        &::after {
          background-color: #fff;
          transform: scale(0.5) translate(0, 0);
        }
        &::before {
          background-color: var(--rotate_color);
          transform: scale(0.5) translate(-200%, -200%);
        }
      }
      .loader11 {
        @include size(var(--size), var(--size));
        border-color: #2f435a;
        display: flex;
        justify-content: space-between;
        &.animate .half_circle::before {
          animation: rotate11 4s linear 1 normal both;
        }
        .half_circle {
          @include size(calc(var(--size) / 2), var(--size));
          position: relative;
          box-sizing: border-box;
          overflow: hidden;
          &::before {
            @include size(var(--size), var(--size));
            position: absolute;
            content: '';
            box-sizing: border-box;
            border: var(--border-size) solid;
            border-radius: 50%;
            transform: rotate(45deg);
            animation: rotate11 4s linear 1 normal both;
          }
          &:nth-child(1)::before {
            left: 0;
            border-color: var(--rotate_color) var(--rotate_color) var(--circle_color)
              var(--circle_color);
            animation-delay: 4s;
          }
          &:nth-child(2)::before {
            right: 0;
            border-color: var(--circle_color) var(--circle_color) var(--rotate_color)
              var(--rotate_color);
          }
        }
      }
      .loader12 {
        @include size(15px, 15px);
        position: relative;
        transform: rotate(45deg);
        &::after,
        &::before {
          @include size(15px, 15px);
          position: absolute;
          content: '';
          top: 50%;
          left: 50%;
          border-radius: 15px;
          transform: translate(-50%, -50%);
          animation: breathe12 1s ease-in-out infinite;
        }
        &::after {
          box-shadow:
            15px 15px var(--color1),
            -15px -15px var(--color2);
        }
        &::before {
          box-shadow:
            15px 15px var(--color3),
            -15px -15px var(--color4);
          transform: translate(-50%, -50%) rotate(90deg);
        }
      }
      .loader13 {
        @include size(90px, 90px);
        position: relative;
        border: 3px solid transparent;
        border-top-color: var(--color1);
        border-radius: 50%;
        animation: spin13 2s linear infinite;
        &::after,
        &::before {
          position: absolute;
          content: '';
          border: 3px solid transparent;
          border-top-color: inherit;
          border-radius: 50%;
        }
        &::after {
          top: 7px;
          left: 7px;
          right: 7px;
          bottom: 7px;
          animation: spin13 1.5s linear infinite;
        }
        &::before {
          top: 15px;
          left: 15px;
          right: 15px;
          bottom: 15px;
          animation: spin13 0.5s linear infinite reverse;
        }
      }
    }
  }
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes rotate6 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes rotate7 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes rotate8 {
    0% {
      transform: scale(1) rotate(0deg);
    }
    100% {
      transform: scale(0) rotate(360deg);
    }
  }
  @keyframes rotate9 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes scale9 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes loader10 {
    50% {
      transform: scale(1) translate(-50%, -50%);
    }
  }
  @keyframes rotate10 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes rotate11 {
    0% {
      transform: rotate(45deg);
    }
    100% {
      transform: rotate(225deg);
    }
  }
  @keyframes breathe12 {
    50% {
      width: 40px;
    }
  }
  @keyframes spin13 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
</style>
